<template>
  <div class="view-dropdown">
    <fx-card title="基础用法">
      <fx-dropdown @change="change">
        <template #header>
          <fx-button type="text">下拉菜单</fx-button>
        </template>
        <fx-dropdown-item v-for="item in list" :key="item.value" :label="item.value">{{ item.value }}</fx-dropdown-item>
      </fx-dropdown>
      <template #hide>
        <pre v-highlight="base"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="点击事件">
      <fx-dropdown @change="change">
        <template #header>
          <fx-button>下拉按钮</fx-button>
        </template>
        <fx-dropdown-item v-for="item in list" :key="item.value" :label="item.value">{{ item.value }}</fx-dropdown-item>
      </fx-dropdown>
      <template #hide>
        <pre v-highlight="click"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="点击选择不隐藏">
      <fx-dropdown @change="change" :is-click-close="false">
        <template #header>
          <fx-button>下拉按钮</fx-button>
        </template>
        <fx-dropdown-item v-for="item in list" :key="item.value" :label="item.value">{{ item.value }}</fx-dropdown-item>
      </fx-dropdown>
      <template #hide>
        <pre v-highlight="hide"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="禁用选项">
      <fx-dropdown @change="change">
        <template #header>
          <fx-button>下拉按钮</fx-button>
        </template>
        <fx-dropdown-item v-for="item in list" :key="item.value" :label="item.value" :disabled="item.disabled">
          {{ item.value }}
        </fx-dropdown-item>
      </fx-dropdown>
      <template #hide>
        <pre v-highlight="close"><code></code></pre>
      </template>
    </fx-card>
    <fx-card title="触发方式">
      <fx-dropdown @change="change" trigger="hover">
        <template #header>
          <fx-button type="primary" plain>hover</fx-button>
        </template>
        <fx-dropdown-item v-for="item in list" :key="item.value" :label="item.value">{{ item.value }}</fx-dropdown-item>
      </fx-dropdown>
      <fx-dropdown @change="change" trigger="click">
        <template #header>
          <fx-button type="primary" plain>click</fx-button>
        </template>
        <fx-dropdown-item v-for="item in list" :key="item.value" :label="item.value">{{ item.value }}</fx-dropdown-item>
      </fx-dropdown>
      <template #hide>
        <pre v-highlight="trigger"><code></code></pre>
      </template>
    </fx-card>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { defaultList } from '@/assets/menuList'
import { FxMessage } from '@/base'

export default defineComponent({
  name: 'viewDropdown',
  setup () {
    const list = ref(defaultList)
    const base = `<fx-dropdown>
  <template #header>
    <fx-button type="text">下拉菜单</fx-button>
  </template>
  <fx-dropdown-item>选项一</fx-dropdown-item>
  <fx-dropdown-item>选项二</fx-dropdown-item>
  <fx-dropdown-item>选项三</fx-dropdown-item>
  <fx-dropdown-item>选项四</fx-dropdown-item>
  <fx-dropdown-item>选项五</fx-dropdown-item>
  <fx-dropdown-item>选项六</fx-dropdown-item>
  <fx-dropdown-item>选项七</fx-dropdown-item>
  <fx-dropdown-item>选项八</fx-dropdown-item>
</fx-dropdown>`
    const click = `<fx-dropdown @change="change">
  <template #header>
    <fx-button>下拉按钮</fx-button>
  </template>
  <fx-dropdown-item label="选项一">选项一</fx-dropdown-item>
  <fx-dropdown-item label="选项二">选项二</fx-dropdown-item>
  <fx-dropdown-item label="选项三">选项三</fx-dropdown-item>
  <fx-dropdown-item label="选项四">选项四</fx-dropdown-item>
  <fx-dropdown-item label="选项五">选项五</fx-dropdown-item>
</fx-dropdown>
export default defineComponent({
  const change = (val: string) => {
    alert(val)
  }
})`
    const hide = `<fx-dropdown :is-click-close="false">
  <template #header>
    <fx-button>下拉按钮</fx-button>
  </template>
  <fx-dropdown-item label="选项一">选项一</fx-dropdown-item>
  <fx-dropdown-item label="选项二">选项二</fx-dropdown-item>
  <fx-dropdown-item label="选项三">选项三</fx-dropdown-item>
  <fx-dropdown-item label="选项四">选项四</fx-dropdown-item>
  <fx-dropdown-item label="选项五">选项五</fx-dropdown-item>
</fx-dropdown>`
    const close = `<fx-dropdown>
  <template #header>
    <fx-button>下拉按钮</fx-button>
  </template>
  <fx-dropdown-item label="选项一" disabled>选项一</fx-dropdown-item>
  <fx-dropdown-item label="选项二">选项二</fx-dropdown-item>
  <fx-dropdown-item label="选项三" disabled>选项三</fx-dropdown-item>
  <fx-dropdown-item label="选项四">选项四</fx-dropdown-item>
  <fx-dropdown-item label="选项五">选项五</fx-dropdown-item>
</fx-dropdown>`
    const trigger = `<fx-dropdown trigger="hover">
  <template #header>
    <fx-button type="primary" plain>hover</fx-button>
  </template>
  <fx-dropdown-item label="选项一">选项一</fx-dropdown-item>
  <fx-dropdown-item label="选项二">选项二</fx-dropdown-item>
  <fx-dropdown-item label="选项三">选项三</fx-dropdown-item>
  <fx-dropdown-item label="选项四">选项四</fx-dropdown-item>
  <fx-dropdown-item label="选项五">选项五</fx-dropdown-item>
</fx-dropdown>
<fx-dropdown trigger="click">
  <template #header>
    <fx-button type="primary" plain>click</fx-button>
  </template>
  <fx-dropdown-item label="选项一">选项一</fx-dropdown-item>
  <fx-dropdown-item label="选项二">选项二</fx-dropdown-item>
  <fx-dropdown-item label="选项三">选项三</fx-dropdown-item>
  <fx-dropdown-item label="选项四">选项四</fx-dropdown-item>
  <fx-dropdown-item label="选项五">选项五</fx-dropdown-item>
</fx-dropdown>`

    const change = (val: string) => {
      FxMessage.success(val)
    }

    return {
      list,
      base,
      click,
      hide,
      close,
      trigger,
      change
    }
  }
})
</script>

<style scoped lang="scss">
.view-dropdown {
}
</style>
